<!--品牌定制-->
<template>
  <div class="need">
    <div class="header"><span></span><span>发布信息</span></div>
    <div class='message'>
      <ul>
        <li>
          <div><span>联系人</span></div><div><input type="text" placeholder="请输入您的名字" v-model='name'></div>
        </li>
        <li>
          <div><span>手机号</span></div><div><input type="number" placeholder="请输入您的联系方式"  v-model='phone'></div>
        </li>
        <li @click="alertPopup"  class="clamp">
          <div><span>所在区域</span></div><div>
          <span v-text="myAddressProvince" v-model='myAddressProvince'></span>
          <span v-text="myAddressCity" v-model='myAddressCity'></span>
          <span v-text="myAddresscounty" v-model='myAddresscounty' style='overflow: hidden;width: 33.33%'></span>
        </div>
        </li>
        <li>
          <div><span>详细地址</span></div><div><input type="text" placeholder="请输入详细地址" v-model='address'></div>
        </li>
        <li>
          <div><span>需求描述</span></div><div><input type="textarea" placeholder="请输入您的定制需求"  v-model='message'></div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <mt-button size="large" class="backgrounds" @click.native='addNeed'>发布</mt-button>
    </div>
    <div class='modal'>
      <mt-popup
        v-model="popupVisible"
        position="bottom">
        <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
      </mt-popup>
    </div>
  </div>
</template>

<script typy="text/ecmascript-6">
  import myaddress from '../add.json'     //引入省市区数据
  export default {
    name: '',
    data () {
      return {
        name:'',
        phone:'',
        address:'',
        message:'',
        popupVisible:false,
        myAddressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: Object.keys(myaddress),  //省份数组
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
        ],
        myAddressProvince:'省',
        myAddressCity:'市',
        myAddresscounty:'区/县',
      }
    },
    created() {


    },
    methods: {
        addNeed(){
            const that = this;
            const params = {
                token:that.getToken(),
                user_name:that.name,
                phone:that.phone,
                address:that.address,
                area:that.myAddressProvince+that.myAddressCity+that.myAddresscounty,
                demand_content:that.message
            }
            const url = that.getUrl('home/custom_insert');
            that.$http.post(url,params,{emulateJSON: true}).then(function (res) {
                if(res.data.code === 0){
                    this.$messagebox('提示', res.data.data);
                }else {
                    this.$messagebox('提示', res.data.errMsg);
                    return false
                }
                that.message = '';
                    that.name = '';
                    that.phone = '';
                    that.address  = '';
                    that.message = '';
            }, function (err) {
                this.$messagebox('提示', '找不到服务器，请稍后再试');
            })
        },
      alertPopup() {
            this.popupVisible = !this.popupVisible
      },
      onMyAddressChange(picker, values) {
        if(myaddress[values[0]]){  //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
          picker.setSlotValues(1,Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
          picker.setSlotValues(2,myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
          this.myAddressProvince = values[0];
          this.myAddressCity = values[1];
          this.myAddresscounty = values[2];
        }
      },
    },
    mounted(){
      this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
        this.myAddressSlots[0].defaultIndex = 0
        // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
        //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
      });
    }
  }
</script>
<style  lang="less" rel="stylesheet/less">
  @import "../../lib/less/variable";
  @import "../../lib/less/normalize";
  .need{
    background: #fff;
    .header{
      .h(40);
      .padding(5,10);
      box-sizing: border-box;
      span:first-child{
        display: inline-block;
        .w(4);
        height: 100%;
        background:#0F7ADA ;
      }
      span:last-child{
        .ml(10);
        .fs(16);
        color: #000;
        font-weight: bold;
      }
    }
    .message{
      width: 100%;
      ul{
        .padding(0,10);
        li{
          width: 100%;
          .h(60);
          .lh(60);
          border-bottom: 1px solid #ccc;

          div{
            display: inline-block;
            .fs(16);
            input{
              background:transparent;
              width: 100%;
              color: #666;
            }
            input:-moz-placeholder, textarea:-moz-placeholder {
              /* Mozilla Firefox 4 to 18 */
              color: #ccc;
            }
          }
          div:first-child{
            width: 30%;
          }
          div:last-child{
            width: 70%;
          }
        }
      }
      .address{
        overflow: hidden;
      }
    }
    .modal{
      width:100%;
      .mint-popup{
        width:100%;
      }
    }
    .footer{
      .padding(10,10);
      box-sizing: border-box;
    }

  }
</style>
